<template>
  <h3 style="margin-bottom: 20px">火车</h3>
  <el-tabs v-model="activeName" class="demo-tabs">
    <el-tab-pane :label="'支出(' + totalOut + ')'" name="first">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="日期" prop="date" />
        <el-table-column label="图片">
          <template #default="scope">
            <el-image
              style="width: 50px; height: 50px; margin-right: 10px"
              v-for="(item, index) in scope.row.img"
              :src="item"
              :key="index"
              :preview-src-list="scope.row.img"
              :preview-teleported="true"
              :hide-on-click-modal="true"
            />
          </template>
        </el-table-column>
        <el-table-column label="金额" prop="money" />
        <el-table-column label="收款人" prop="payee" />
        <el-table-column label="备注" prop="remark" />
      </el-table>
    </el-tab-pane>
    <el-tab-pane :label="'收入(' + totalIn + ')'" name="second">
      <el-table :data="tableData2" style="width: 100%">
        <el-table-column label="日期" prop="date" />
        <el-table-column label="图片">
          <template #default="scope">
            <el-image
              style="width: 50px; height: 50px; margin-right: 10px"
              v-for="(item, index) in scope.row.img"
              :src="item"
              :key="index"
              :preview-src-list="scope.row.img"
              :preview-teleported="true"
              :hide-on-click-modal="true"
            />
          </template>
        </el-table-column>
        <el-table-column label="金额" prop="money" />
        <el-table-column label="打款人" prop="payee" />
        <el-table-column label="备注" prop="remark" />
      </el-table>
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts" setup>
import { ref, computed } from "vue";

const train = import.meta.glob("../assets/images/train/*", { eager: true });
const train2 = import.meta.glob("../assets/images/train2/*", { eager: true });

const activeName = ref("first");

const tableData: any = [
  {
    date: "2024-07-29",
    money: 50,
    payee: "郑源",
    remark: "往来款",
    img: [(train["../assets/images/train/train-7-29.png"] as any).default],
  },
  {
    date: "2024-09-18",
    money: 50,
    payee: "程庆",
    remark: "往来款",
    img: [(train["../assets/images/train/train-9-18.jpg"] as any).default],
  },
  {
    date: "2024-10-02",
    money: 80,
    payee: "程庆",
    remark: "往来款",
    img: [
      (train["../assets/images/train/train-10-02-1.jpg"] as any).default,
      (train["../assets/images/train/train-10-02-2.jpg"] as any).default,
      (train["../assets/images/train/train-10-02-3.jpg"] as any).default,
      (train["../assets/images/train/train-10-02-4.jpg"] as any).default,
    ],
  },
];

const totalOut = computed(() => {
  return tableData.reduce((sum: number, item: any) => {
    return (sum += item.money);
  }, 0);
});

const tableData2: any = [
  {
    date: "2024-10-10",
    money: 40,
    payee: "程庆",
    remark: "往来款",
    img: [(train2["../assets/images/train2/10-10.jpg"] as any).default],
  },
  {
    date: "2024-10-14",
    money: 60,
    payee: "程庆",
    remark: "往来款",
    img: [(train2["../assets/images/train2/10-14.jpg"] as any).default],
  },
];

const totalIn = computed(() => {
  return tableData2.reduce((sum: number, item: any) => {
    return (sum += item.money);
  }, 0);
});
</script>
